<template>
	<view class="context">
		<view class="select">
			<u-cell-group>
				<u-cell-item title="选择币种" :title-style="{fontSize:'32rpx',fontWeight:'bold'}" value="BTC"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="box-title">发送数量</view>
			<view class="box-input">
				<u-input placeholder="请输入发送数量" :focus="true"></u-input>
				<text class="box-input-btn">全部</text>
			</view>
			<view class="box-info">可用0BTC</view>
		</view>
		<view class="person">
			<view class="person-text">接收人</view>
			<view class="person-text-input">
				<u-input placeholder="请输入接收人UID"></u-input>
			</view>
		</view>
		<button class="submit">确认发送</button>
	</view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      pay_number: null, // 支付数量
      get_uid: null, //接收人UID
      isLoading: false,
      payShow: false, // 支付密码
      payCoin: "",
      getShow: false,
      getCoin: "",
      show: false,
      exchange_setting: [],
      exchangeItem: {},
      exchange_getItem: {},
      costRatio: 0,
    };
  },
  methods: {
    ...mapActions("asset", ["loadAssets", "internal", "exchangeSetting"]),
    // 选择支付币种
    paySelect(item) {
      this.exchangeItem = item;
      this.payCoin = item.coin_pay; // 把币种给payCoin
      this.getCoin = item.get_list[0].coin_get; // 得到币种
      this.costRatio = item.get_list[0].cost_ratio;
      this.payShow = false;
    },
    // 选择得到币种
    getSelect(item) {
      this.getCoin = item.coin_get; // 把币种给getCoin
      this.exchange_getItem = item;
      this.getShow = false;
    },
    // 全部兑换按钮
    allExchange() {
      this.pay_number = this.payItem.balance;
    },
    // 点击立即兑换
    config() {
      if (!this.pay_number) {
        this.makeToast({
          title: this.$t("wallet.transferPage.transfer_kong"),
        });
        return;
      }

      if (!this.get_uid) {
        this.makeToast({
          title: this.$t("wallet.transferPage.getAccount_kong"),
        });
        return;
      }

      this.show = true;
    },
    // 输入密码兑换
    async payPasswordDone(data) {
      this.show = false;
      // 调用兑换接口
      try {
        await this.internal({
          to: this.get_uid,
          symbol: this.payCoin,
          num: this.pay_number,
          pay_password: data.password,
        });
        this.makeToast({
          title: this.$t("wallet.transferPage.send_success"),
        });
        this.loadAssets();
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    ...mapGetters("asset", ["assets"]),
    // 计算当前兑换比例
    ratio() {
      let price = this.payItem && this.payItem.coin.price;
      return price && price[this.getCoin];
    },
    // 计算可得兑换比例
    getNumber() {
      if (!this.pay_number) {
        return 0;
      }
      return parseFloat(
        this.pay_number * this.ratio -
          (this.pay_number * this.ratio * this.costRatio) / 100
      ).toFixed(4);
    },
    // 得到兑换币种数据
    payItem() {
      let data;
      this.assets.map((item) => {
        if (item.symbol == this.payCoin) {
          data = item;
        }
      });
      return data;
    },
  },
  async onLoad() {
    // 开启loading
    this.isLoading = true;
    // 加载币种
    await this.loadAssets();
    // 加载交易对
    this.exchange_setting = await this.exchangeSetting();
    // 支付币种，获得币种初始化
    this.exchangeItem = this.exchange_setting[0];
    this.payCoin = this.exchangeItem.coin_pay;
    this.exchange_getItem = this.exchangeItem.get_list[0];
    this.getCoin = this.exchange_getItem.coin_get;
    this.costRatio = this.exchangeItem.get_list[0].cost_ratio;
    // 关闭loading
    this.isLoading = false;
  },
};
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}
	.select{
		margin-top: 25rpx;
	}
	.box{
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		.box-title{
			font-size: 28rpx;
		}
		.box-input{
			display: flex;
			margin: 40rpx auto;
			.box-input-btn{
				color: #2A96EE;
				font-size: 30rpx;
			}
		}
		.box-info{
			font-size: 24rpx;
			color: #999;
		}
	}
	.person{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		.person-text{
			font-size: 32rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}
	}
	.submit{
		width: 690rpx;
		height: 88rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		color: #fff;
		margin: 100rpx auto;
	}
</style>